<script setup>
import { ref, reactive, computed } from "vue";
const a = reactive({
  name: "jj",
  hobby: ["css", "html", "vue"],
});
// 计算属性computed是vue技术栈中一个非常重要的性能优化手段
// 使用场景：把一些不能直接在页面中渲染的数据，而是需要通过js计算处理后才能渲染的数据，这个时候优先
// 机制：计算属性里的变量有依赖项，只要依赖项不变计算属性不会重新执行，只有依赖项变化了，计算属性才会执行
// 基本使用
const b = computed(() => {
  return a.hobby.length > 0 ? "yes" : "no";
});
// 购物车计算总数
const cartList = ref([100, 88, 22, 66, 44, 99, 55, 66, 33, 22]);
const totalPrice = computed(() => {
  console.log("computed方法执行了");

  return cartList.value.reduce((a, b) => a + b);
});
const totalPrice2 = () => {
  console.log("普通方法执行了");
  return cartList.value.reduce((a, b) => a + b);
};
// 高级使用
// computed计算属性是vue中一个较为重要的性能优化的API
// 对一些依赖现有数据通过计算出来的数据进行缓存（依赖缓存）
// 计算属性的使用前提：
// 1.页面需要的数据js中没有，
// 2.可以通过js中现有的数据计算出来
// 计算属性默认只是可读的，不能修改，如果直接修改会警告，如果需要修改使用set函数
// 在实际项目中，更多是使用get函数
// 全选
const one = ref(false);
const two = ref(false);
const three = ref(false);
const all = computed({
  get() {
    return one.value && two.value && three.value;
  },
  set(val) {
    one.value = val;
    two.value = val;
    three.value = val;
  },
});
</script>

<template>
  <p>{{ a.hobby.length > 0 ? "yes" : "no" }}</p>
  <p>{{ b }}</p>
  <p>{{ totalPrice }}</p>
  <p>{{ totalPrice2() }}</p>
  <ul>
    <li><input type="checkbox" v-model="all" />全选</li>
    <li><input type="checkbox" v-model="one" />1</li>
    <li><input type="checkbox" v-model="two" />2</li>
    <li><input type="checkbox" v-model="three" />3</li>
  </ul>
</template>

<style scoped>
li {
  list-style: none;
}
</style>
